<template>
  <div class="share-whole">
    <div class="share_banner"><img src="https://img.wifenxiao.com/h5-wfx/images/live/share_banner.png" /></div>
    <div class="whole">
      <template v-if="!img">
        <div class="tips">请输入正确的微信号，提交后不可修改哦~</div>
        <div class="wxChart"><input type="text" v-model="user_name" placeholder="请输入正确微信号" /></div>
        <div class="btn-addorder red-gra-btn" @click="getSearchShare">提交</div>
        <img class="share_step" src="https://img.wifenxiao.com/h5-wfx/images/live/share_step.png" />
      </template>
      <template v-else>
        <img class="wx_code" :src='img' :show-menu-by-longpress="true">
        <div class="wx-tips">长按可保存图片，识别后绑定成功即可成为分享员哦~</div>
        <div class="wx-tips" style="color: #FE1B49">邀请成功后，请点击下方按钮确认~</div>
        <div class="btn-addorder red-gra-btn" @click="getSearchShare">验证是否成为分享员</div>
      </template>
    </div>
  </div>
</template>
<script>
import { getSearchSharerBind, getInviteSharerBind } from '@/api/user/live/list'
import small from '@/smallapp/small'

export default {
  data() {
    return {
      user_name: '',
      img: ''
    }
  },
  methods: {
    saveImg() {
      small.saveImage(this.shareImg)
    },
    getSearchShare() {
      this.$loadingWrap.show()
      getSearchSharerBind({ user_name: this.user_name }).then(res => {
        if (res.status == 1) {
          getInviteSharerBind({ user_name: this.user_name }).then(data => {
            this.$loadingWrap.close()
            if (data.status == 1) {
              this.img = `data:image/png;base64,${data.data.qrcode_img_base64}`
            } else {
              this.$Error(data.msg)
            }
          })
        } else {
          this.$loadingWrap.close()
          this.$Error(res.msg)
        }
      })
    }
  }

}
</script>
<style lang="scss">
.share-whole {
  // position: relative;
  .share_banner {
    position: fixed;
    height: 416px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .whole {
    text-align: center;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    top: 360px;
    left: 0;
    width: 100%;
    padding: 0 56px;
    height: 100%;
    .tips {
      color: #404040;
      font-size: 32px;
      margin-top: 62px;
      margin-bottom: 40px;
      font-weight: 500;
    }
    .wxChart {
      margin-bottom: 32px;
      border-radius: 8px;
      padding: 14px 32px;
      border: 1px solid #DCDFE6;
      font-size: 28px;
      input {
        width: 100%;
      }
    }
    .btn-addorder{
      margin-bottom: 92px;
      padding: 16px 32px;
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      border-radius: 72px;
      background: #ff4338;
      color: #fff;
    }
    .share_step {
      width: 100%;
    }
    .wx_code {
      width: 408px;
      height: 408px;
      margin-top: 72px;
    }
    .wx-tips {
      margin: 32px 0;
      font-size: 32px;
      font-weight: 500;
    }
  }
}

</style>